<!--
 * @author hugh
 * @time  2021-01-10 11:40
 * @title  grid icon选择
 * @desc
 -->
<template>
  <div class="flex justify-between bg-theme-dark" style="width: 100%;" v-if="!data.isPhone">
    <div class="flex justify-center align-center">
      <div @click="handLeftMenu"><i class="size-24 text-white" :class="'el-icon-s-' + (data.showMenus ? 'fold' : 'unfold')"></i></div>
      <div class="margin-left-sm " style="width: 100%;">
        <el-menu
          :default-active="props.active + ''"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleClick"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#ffffff"
        >
          <el-menu-item v-for="(item, index) in props.menus" :key="index" :index="index">
            <i :class="'el-icon-' + item.css" class="size-24 text-white"></i>
            {{ item.name }}
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="flex justify-start align-center ">
      <div class="margin-left-sm flex align-center">
        <i style="font-size: 1.275rem;" class="el-icon-search text-white"></i>
        <el-autocomplete
          class="inline-input margin-left-sm"
          v-model="querySearchState"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          @select="handleSelect"
        >
          <template #suffix>
            <i class="el-icon-edit el-input__icon text-white"></i>
          </template>
          <template #default="{item}">
            <div class="name text-white">{{ item.name }}</div>
          </template>
        </el-autocomplete>
      </div>
      <div class="margin-left-sm " @click="onScreenFull">
        <i v-if="data.isFullscreen" style="font-size: 1.275rem;" class="el-icon-rank text-white"></i>
        <i v-else style="font-size: 1.275rem;" class="el-icon-full-screen text-white"></i>
      </div>
      <div class="margin-left-sm"><i style="font-size: 1.275rem;" class="el-icon-message-solid text-white"></i></div>
      <div class="margin-left-sm"><lang-select></lang-select></div>
      <div class="margin-left-sm">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link flex align-center">
            <img v-if="user.avatar" class="image-sm round" :src="user.avatar" />
            <img v-else class="image-sm round" src="../../assets/avatar/avatar1.jpeg" />
            <i class="el-icon-arrow-down el-icon--right text-white"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>{{ user.username }}</el-dropdown-item>
              <el-dropdown-item command="/UserCenter">个人中心</el-dropdown-item>
              <el-dropdown-item command="/login" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
  <div v-else class="flex justify-between align-center" style="width: 100%;">
    <span class="text-white">{{ $t('app.title') }}</span>
    <div class="margin-left-sm flex align-center">
      <i style="font-size: 1.275rem;" class="el-icon-search text-white"></i>
      <el-autocomplete
        class="inline-input margin-left-sm"
        v-model="querySearchState"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        :trigger-on-focus="false"
        @select="handleSelect"
      >
        <template #suffix>
          <i class="el-icon-edit el-input__icon text-white"></i>
        </template>
        <template #default="{item}">
          <div class="name text-white">{{ item.name }}</div>
        </template>
      </el-autocomplete>
    </div>
    <i class="text-white el-icon-caret-bottom size-36" @click="data.drawer = true"></i>
    <el-drawer title="操作" v-model="data.drawer" :with-header="false" direction="rtl" size="50%" custom-class="bg-theme-dark">
      <div>
        <div class="flex justify-between padding-sm">
          <div class="margin-left-sm" v-if="user">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link flex align-center">
                <img v-if="user.avatar" class="image-sm round" :src="user.avatar" />
                <img v-else class="image-sm round" src="../../assets/avatar/avatar1.jpeg" />
                <i class="el-icon-arrow-down el-icon--right text-white"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>{{ user.username }}</el-dropdown-item>
                  <el-dropdown-item command="/UserCenter">个人中心</el-dropdown-item>
                  <el-dropdown-item command="/login" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="margin-left-sm"><lang-select></lang-select></div>
        </div>
        <el-menu :default-active="props.active" class="el-menu-demo" mode="vertical" @select="handleClick" background-color="#001529" text-color="#fff" active-text-color="#ffffff">
          <el-menu-item v-for="(item, index) in props.menus" :key="index" :index="index">
            <i class="el-icon-s-data size-24 text-white"></i>
            {{ item.name }}
          </el-menu-item>
        </el-menu>
      </div>

      <div class="foot width-df flex justify-center"><el-button @click="data.drawer = false" size="small" round>收起</el-button></div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, toRefs, reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import ScreenFull from 'screenfull';
import LangSelect from '@/components/LangSelect/index.vue';
const emit = defineEmits(['tabclick', 'select', 'header', 'leftmenu']);
const props = defineProps({
  restaurants: Array,
  active: [String, Number],
  menus: Array
});

// 路由
const router = useRouter();
// vuex
const store = useStore();
const user=store.state.clients.user
const data = reactive({
  isFullscreen: false,
  showMenus: true,
  isPhone: store.state.isPhone,
  drawer: false
});
onMounted(() => {
  window.onresize = function() {
    data.isPhone = document.documentElement.clientWidth < document.documentElement.clientHeight;
  };
});
/**
 * 检索路由查询
 */
const lists: any = props.restaurants;
const querySearch = (queryString: string, cb: any) => {
  const results = queryString ? lists.filter(createFilter(queryString)) : lists;
  // 调用 callback 返回建议列表的数据
  cb(results);
};
const createFilter = (queryString: any) => {
  return (restaurant: any) => {
    return (restaurant.name as string).toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};
const toRouter = (path: string) => {
  router.push(path);
  emit('header', path);
}
const handleClick = (tab: any, event: any) => {
  emit('tabclick', tab);
}
/**
 * 全屏
 */
const onScreenFull = () => {
  ScreenFull.toggle();
  data.isFullscreen = !data.isFullscreen;
}
/**
 * 检索列表点击
 */
const handleSelect = (item: any) => {
  emit('select', item);
};

/**
 * 点击头像下拉菜单
 */
const handleCommand = (command: any) => {
  if (command == '/login') {
    store.commit('loginOut');
  }
  toRouter(command);
}
/**
 * 点击头像下拉菜单
 */
const handLeftMenu = (status: any) => {
  data.showMenus = !data.showMenus;
  emit('leftmenu', data.showMenus);
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-menu {
  border-right: none;
}

.el-submenu .el-menu-item {
  min-width: 100px;
}
</style>
